<template>
    <div class="style_all">
        <el-row class="colStyle">
            <el-col :span="3" style="background-color: #07eed2">
                <div style="padding-top: 14%;">
                    <el-avatar>
                        <img src="../../assets/picture/person.png">
                    </el-avatar>
                </div>
            </el-col>
            <el-col :span="5" style="background-color: #c1e24c">
                <div class="nameStyle">
                    <p style="font-size: 26px">{{username}}</p>
                    <el-button type="info" plain size="mini" style="height: 20%;margin:auto" @click="showPersonDialog">
                        编辑资料<i
                            class="el-icon-edit el-icon--right"></i></el-button>
                </div>
                <div style="font-size: 16px;padding-left: 10%">
                    管理员
                </div>
            </el-col>
        </el-row>
        <div style="padding-top: 5%;">
            <el-card class="box-card">
                <el-descriptions title="管理员信息" size="medium" style="font-size: 17px;">
                    <el-descriptions-item label="用户名">{{managerForm.mname}}</el-descriptions-item>
                    <el-descriptions-item label="性别">{{managerForm.sex}}</el-descriptions-item>
                    <el-descriptions-item label="联系方式">{{managerForm.tel}}</el-descriptions-item>
                    <el-descriptions-item label="健康状况">{{managerForm.health}}</el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-tag size="small">管理员</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
        </div>

        <!--展示完善有信息页面-->
        <el-dialog title="编辑个人信息" :visible.sync="PersonDialog" width="45%" @colse="PersonDialogClosed" center>
            <el-form ref="personFormRef" :model="managerForm" label-width="90px" size="mini">
                <el-form-item label="用户名:" prop="mname" :rules="rules.mname">
                    <el-input type="text" v-model="managerForm.mname"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password" :rules="rules.password">
                    <el-input v-model="managerForm.password"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="sex" :rules="rules.sex">
                    <el-input v-model="managerForm.sex"></el-input>
                </el-form-item>
                <el-form-item label="电话:" prop="tel" :rules="rules.tel">
                    <el-input v-model="managerForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="健康状况:" prop="health" :rules="rules.health">
                    <el-input v-model="managerForm.health"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="PersonDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateInfo">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "personal",
        data() {
            return {
                activeIndex: "1",
                username: null,
                password: '',
                PersonDialog: false,


                managerForm: {
                    managerID: "",
                    mid: "",
                    mname: '',
                    password: "",
                    sex: "",
                    tel: "",
                    health: "",
                },

                rules: {
                    mname: [{required: true, message: '用户名为必填项', trigger: 'blur'}, {
                        min: 2,
                        max: 8,
                        message: '长度在 2 到 8 个字符',
                        trigger: 'blur'
                    }],
                    password: [{required: true, message: '密码为必填项', trigger: 'blur'}],
                    sex: [{required: true, message: '性别为必填项', trigger: 'blur'}, {
                        min: 1,
                        max: 1,
                        message: '长度为1个字符',
                        trigger: 'blur'
                    }],
                    tel: [{required: true, message: '电话为必填项', trigger: 'blur'}, {
                        min: 2,
                        max: 11,
                        message: '长度在 2 到 11 个字符',
                        trigger: 'blur'
                    }],
                    health: [{required: true, message: '健康为必填项', trigger: 'blur'}, {
                        min: 2,
                        max: 4,
                        message: '长度在 2 到 4 个字符',
                        trigger: 'blur'
                    }],
                },
            }
        },
        created() {
            this.managerForm.mid = window.sessionStorage.getItem('mid')
            this.username = window.sessionStorage.getItem('username')
            this.showManagerInfo()
        },
        methods: {
            async showManagerInfo() {
                console.log(this.userID)
                const {data: res} = await this.$http.get("getManagerById?mid=" + this.managerForm.mid);
                this.managerForm = res;
            },
            async showPersonDialog() {
                console.log(this.userID)
                const {data: res} = await this.$http.get("getManagerById?mid=" + this.managerForm.mid);
                this.managerForm = res;
                this.PersonDialog = true;
            },
            updateInfo() {
                console.log(this.managerForm)
                this.$refs.personFormRef.validate(async valid => {
                    console.log(valid + "****", this.managerForm);
                    if (!valid) return;
                    // 发起请求
                    const {data: res} = await this.$http.post("updateManagerInfo", this.managerForm);
                    console.log(res);
                    if (res.flag !== "ok") return this.$message.error("操作失败！！！");
                    this.$message.success("操作成功！！！");
                    //隐藏
                    this.PersonDialog = false;
                    /*刷新当前页面*/
                    this.$router.go(0)
                });
            },
            PersonDialogClosed() {
                this.$refs.personFormRef.resetFields();
            },
        }
    }
</script>

<style scoped>
    .style_all {
        height: 100%;
    }

    .colStyle {
        background-color: #fffdef;
        width: 80%;
        padding-top: 1%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .box-card {
        width: 80%;
        height: 300px;
        background-color: #ecfdff;
        display: flex;
        margin: 0 auto;
    }

    .nameStyle {
        display: flex;
        padding-left: 8%;
    }

    .el-avatar {
        display: flex;
        width: 100px;
        height: 100px;
        background-color: #60adf8;
        margin: 0 10%;
    }
</style>